<!--
 * @Descripttion: 
 * @version: 
 * @Author: Ansel
 * @Date: 2020-03-30 22:44:30
 * @LastEditors: Ansel
 * @LastEditTime: 2020-03-30 23:16:09
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/echarts.js"></script>
    <style>
        div{
            width: 1000px;
            height: 800px;
            float: left;
        }
    </style>
</head>
<body>
    <div id="chart1"></div>
    <div id="chart2"></div>
    <script>
        // console.log(echarts);
        var myCharts1 = echarts.init(document.getElementById("chart1"));//生成一个echarts实例
        myCharts1.setOption({//配置图表的参数
            title:{
                text:"柱状图"
            },
            legend:{ //图例
                data:['销量']
            },
            xAxis:{
                data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
            },
            yAxis:{//y轴的设置

            },
            series:{ //系列列表
                name:"销量",
                type:'line', //图表的类型
                data:[5,20,36,10,19,14] //图表的数据
            }
        })

        var myCharts2 = echarts.init(document.getElementById("chart2"));//生成一个echarts实例
        myCharts2.setOption({//配置图表的参数
            title:{
                text:"饼图"
            },
            series:{ //系列列表
                name:"访问来源",
                type:'pie', //图表的类型
                roseType:'angle', //蓝丁格尔图
                data:[
                    {value:235,name:"视频广告"},
                    {value:274,name:"联盟广告"},
                    {value:300,name:"邮件营销"},
                    {value:350,name:"搜索引擎"},
                    {value:400,name:"直接访问"},
                ] //图表的数据
            }
        })
    </script>
</body>
</html>